<template>
    <div class="check-bill">
        <ItemDetail :show.sync="showModal" :value="item" title="Edit Item" :id="itemID"
                    @submit="confirmSubmit" :action="action" :height="600"></ItemDetail>
        <div class="white-box">
            <div class="row">
                <div class="col-md-6">
                    <label>start</label>
                    <input v-model="start" class="form-control" type="date"/>
                </div>
                <div class="col-md-6">
                    <label>end</label>
                    <input v-model="end" class="form-control" type="date"/>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <button class="btn btn-primary pull-right" type="button" @click="fetch"
                            style="margin: 10px 12px 0 0">Go!
                    </button>
                </div>
            </div>
        </div>

        <div class="white-box">
            <div class="row">
                <section>
                    <div class="sttabs tabs-style-line" style="overflow: visible;">
                        <nav>
                            <ul>
                                <li>
                                    <a @click="getTableData('commentOrders')">
                                        <span>Comment</span>
                                        <span v-if="data && data['commentOrders']"> / <span class="text-primary">{{data['commentOrders'].length}}</span> 条</span>
                                    </a>
                                </li>
                                <li>
                                    <a @click="getTableData('adjustOrders')">
                                        <span>Adjust</span>
                                        <span v-if="data && data['adjustOrders']"> / <span class="text-primary">{{data['adjustOrders'].length}}</span> 条</span>
                                    </a>
                                </li>
                                <li>
                                    <a @click="getTableData('hasNoHostOrders')">
                                        <span>Ownership</span>
                                        <span v-if="data && data['hasNoHostOrders']"> / <span class="text-primary">{{data['hasNoHostOrders'].length}}</span> 条</span>
                                    </a>
                                </li>
                                <li>
                                    <a @click="getTableData('statusOrders')">
                                        <span>Status</span>
                                        <span v-if="data && data['statusOrders']"> / <span class="text-primary">{{data['statusOrders'].length}}</span> 条</span>
                                    </a>
                                </li>
                                <li>
                                    <a @click="getTableData('reservationRepeatOrders')">
                                        <span>reservation_code</span>
                                        <span v-if="data && data['reservationRepeatOrders']"> / <span class="text-primary">{{data['reservationRepeatOrders'].length}}</span> 条</span>
                                    </a>
                                </li>
                                <li>
                                    <a @click="getTableData('checkRepeatOrders')">
                                        <span>Overlay</span>
                                        <span v-if="data && data['checkRepeatOrders']"> / <span class="text-primary">{{overlayCount}}</span> 条</span>
                                    </a>
                                </li>
                                <li>
                                    <a @click="getTableData('feeOrders')">
                                        <span>Fee</span>
                                        <span v-if="data && data['feeOrders']"> / <span class="text-primary">{{data['feeOrders'].length}}</span> 条</span>
                                    </a>
                                </li>
                                <li>
                                    <a @click="getTableData('cleanFeeOrders')">
                                        <span>Clean_fee</span>
                                        <span v-if="data && data['cleanFeeOrders']"> / <span class="text-primary">{{data['cleanFeeOrders'].length}}</span> 条</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                        <div class="content-wrap">
                            <section></section>
                            <section></section>
                            <section></section>
                            <section></section>
                            <section></section>
                            <section></section>
                            <section></section>
                            <section></section>
                        </div>
                        <div class="table-wrapper">
                            <item-table :title="tableTitle" :columns="defaultColumns" :total="table.length" :data="table" :loading="tableLoading"
                                        @sort="sort" isColumns :model="currentModel">
                                <template slot="room_title" slot-scope="props">
                                    <div class="td-ellipsis">
                                        {{props.item.room_title}}
                                    </div>
                                    <i class="fif fif-ellipsis text-info"
                                       @click="showTdDetail(props.item.room_title)"></i>
                                </template>
                                <template slot="physical_room_id" slot-scope="props">
                                    <a :href="`#/physicalroomcalendar/${props.item.physical_room_id}`"
                                       target="_blank">
                                        {{props.item.physical_room_id}}
                                    </a>
                                </template>
                                <template slot="logical_room_id" slot-scope="props">
                                    <a :href="`#/logicalroomcalendar/${props.item.logical_room_id}`"
                                       target="_blank">
                                        {{props.item.logical_room_id}}
                                    </a>
                                </template>
                                <template slot="actions" slot-scope="props">
                                    <button type="button"
                                            class="btn btn-info btn-outline btn-circle btn-md m-r-5"
                                            @click="_editItem(props)">
                                        <i class="fif fif-edit"></i>
                                    </button>
                                    <button type="button"
                                            class="btn btn-warning btn-outline btn-circle btn-md m-r-5"
                                            @click="_ignore(props)">
                                        <i class="fif fif-check"></i>
                                    </button>
                                </template>
                            </item-table>
                        </div>
                        <!-- /content -->
                    </div>
                    <!-- /tabs -->
                </section>
            </div>
        </div>

    </div>
</template>

<script>
    import '@/static/js/plugins/cbpFWTabs'
   // import moment from 'moment'
    import ItemTable from '@/components/widgets/ItemTable'
    import ItemDetail from '@/components/widgets/ItemDetail'
    // mixin
    import {lifeHookMixin, itemMixin} from '@/mixins/item'
    import {getQuestionableOrder} from '@/api/notification'
    import {toJsonData} from '@/utils'
    // config
    import columns from '@/config/columns'

    export default {
        name: 'CheckBill',
        components: {ItemTable, ItemDetail},
        mixins: [lifeHookMixin, itemMixin],
        created() {
            this.defaultColumns = columns['Order2']
        },
        mounted() {

            [].slice.call(document.querySelectorAll('.sttabs')).forEach(function (el) {
                new CBPFWTabs(el);
            });

            let today = moment().date()
            // 大于10号取这个月为周期，否则取上个月为周期
            if (today <= 10) {
                this.start = moment().subtract(1, 'month').startOf('Month').format("YYYY-MM-DD")
                this.end = moment().subtract(1, 'month').endOf('Month').format("YYYY-MM-DD")
            } else {
                this.start = moment().startOf('Month').format("YYYY-MM-DD")
                this.end = moment().endOf('Month').format("YYYY-MM-DD")
            }
            this.headers = []
            this.data = null
            this.genTitle('commentOrders')
        },
        data() {
            return {
                columns: [],
                table: [],
                tableLoading: false,
                tableTitle: '',
                orderBy: null,
                orderItem: null,
                keyWord: '',
                start: '',
                end: '',
                tag: 'commentOrders',
                currentModel: null,

                overlayCount: 0
            }
        },
        methods: {
            sort(orderBy, item) {
                this.orderBy = orderBy[0]
                this.orderItem = item[0]
                this.getTableData(this.tag)
            },
            fetch() {
                this.tableLoading = true
                getQuestionableOrder(this.start, this.end).then((response => {
                    this.tableLoading = false
                    this.data = response.data.data
                    this.headers = response.data.headers

                    if (this.data['checkRepeatOrders']) {
                        for (let key in this.data['checkRepeatOrders']) {
                            this.overlayCount += this.data['checkRepeatOrders'][key].length
                        }
                    }

                    this.getTableData(this.tag)
                })).catch(e => this.tableLoading = false)
            },
            getTableData(tag) {
                this.tag = tag
                this.genTitle(tag)
                if (!this.data) {
                    return
                }
                let data = []
                this.tableLoading = true
                if (tag === 'checkRepeatOrders') {
                    for (let key in this.data[tag]) {
                        data = data.concat(this.data[tag][key])
                    }
                    data = toJsonData(this.headers, data)
                } else {
                    data = toJsonData(this.headers, this.data[tag])
                }

                this.currentModel = tag

                if (this.orderBy && this.orderItem) {
                    data = data.sort((a, b) => {
                        return this.orderBy == 'descend' ?
                            String(b[this.orderItem]).localeCompare(String(a[this.orderItem]))
                            : String(a[this.orderItem]).localeCompare(String(b[this.orderItem]))
                    })
                }

                if (this.keyWord.trim()) {
                    data = data.filter(item => {
                        return String(item.physical_room_id).indexOf(this.keyWord) != -1 ||
                            String(item.comment).indexOf(this.keyWord) != -1 ||
                            String(item.reservation_code).indexOf(this.keyWord) != -1 ||
                            String(item.clean_fee).indexOf(this.keyWord) != -1 ||
                            String(item.logical_room_id).indexOf(this.keyWord) != -1
                    })
                }

                this.table = data
                this.$nextTick(() => this.tableLoading = false)
            },
            genTitle(tag) {
                this.tableTitle = ''
                switch (tag) {
                    case 'commentOrders':
                        this.tableTitle = 'Comment中有remark的情况（忽略含有’已交接CM’，含有’paid’的备注)';
                        break;
                    case 'feeOrders':
                        this.tableTitle = '疑似金额有问题的订单';
                        break;
                    case 'hasNoHostOrders':
                        this.tableTitle = '没有归属的订单';
                        break;
                    case 'statusOrders':
                        this.tableTitle = ' 状态是CANCEL_PRE, BNB_ALT, HALF_PRICE的订单';
                        break;
                    case 'reservationRepeatOrders':
                        this.tableTitle = 'reservation_code重复的订单';
                        break;
                    case 'cleanFeeOrders':
                        this.tableTitle = ' 清扫费为0的订单';
                        break;
                    case 'adjustOrders':
                        this.tableTitle = '调整单';
                        break;
                    case 'checkRepeatOrders':
                        this.tableTitle = ' checkin,checkout发生重叠的订单';
                        break;
                }
            },
            _editItem(props) {
                this.model = 'Order'
                this.editItem(props)
            },
            _ignore(props) {
                this.noteName = 'orderexp'
                this.ignoreItem(props)
            }
        },
        watch: {
            keyWord() {
                this.getTableData(this.tag)
            }
        }
    }
</script>

<style lang="stylus" scoped>
    .check-bill
        .content-current
            min-height: 0
            padding: 0
        .table-wrapper
            min-height: 200px
        .app-search
            input[placeholder]
                color: #fff !important;
            input:
            :-webkit-input-placeholder
                color: #fff !important;

</style>